<template>
  <div class="container">
    <div class="left-board">
      <div class="logo-wrapper">
        <div class="logo">FusionView 可视化平台</div>
      </div>

      <el-scrollbar class="left-scrollbar">
        <layer-items :activeData="activeData" :drawingList="drawingList" :activeId="activeId" @active-index-change="activeIndexChange"></layer-items>
      </el-scrollbar>
    </div>
    
    <div class="center-board">
      <div class="action-bar">

        <div style="width: 50%; float: left; position: relative;top:50%;transform:translateY(-50%);">
          <el-menu class="el-menu-demo" mode="horizontal" >
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-pie-chart"></i>图表</template>

              <div v-for="(item,i) in chartsComponents" :key="i">
                <el-submenu :index="item.chartType" v-if="item.child">
                  <template slot="title"><i :class="item.icon"></i>{{item.layerName}}</template>
                  <el-menu-item :index="val.chartType" v-for="val in item.child" :key="val.chartType" @click="addComponent(val)">
                    <i :class="val.icon"></i>
                    <span>{{val.layerName}}</span>
                  </el-menu-item>
                </el-submenu>
                <el-menu-item :index="item.customId" @click="addComponent(item)" v-else > 
                  <i :class="item.icon"></i>
                  <span slot="title">{{item.layerName}}</span>
                </el-menu-item>
              </div>
              
            </el-submenu>

            <el-submenu index="2">
              <template slot="title"><i class="el-icon-tickets"></i>文本</template>

              <div v-for="(item,i) in textComponents" :key="i">
                <el-submenu :index="item.chartType" v-if="item.child">
                  <template slot="title"><i :class="item.icon"></i>{{item.layerName}}</template>
                  <el-menu-item :index="val.chartType" v-for="val in item.child" :key="val.chartType" @click="addComponent(val)">
                    <i :class="val.icon"></i>
                    <span>{{val.layerName}}</span>
                  </el-menu-item>
                </el-submenu>
                <el-menu-item :index="item.customId" @click="addComponent(item)" v-else > 
                  <i :class="item.icon"></i>
                  <span slot="title">{{item.layerName}}</span>
                </el-menu-item>
              </div>
              
            </el-submenu>

            <el-submenu index="3">
              <template slot="title"><i class="el-icon-picture-outline"></i>媒体</template>

              <div v-for="(item,i) in mediaComponents" :key="i">
                <el-submenu :index="item.chartType" v-if="item.child">
                  <template slot="title"><i :class="item.icon"></i>{{item.layerName}}</template>
                  <el-menu-item :index="val.chartType" v-for="val in item.child" :key="val.chartType" @click="addComponent(val)">
                    <i :class="val.icon"></i>
                    <span>{{val.layerName}}</span>
                  </el-menu-item>
                </el-submenu>
                <el-menu-item :index="item.customId" @click="addComponent(item)" v-else > 
                  <i :class="item.icon"></i>
                  <span slot="title">{{item.layerName}}</span>
                </el-menu-item>
              </div>
              
            </el-submenu>

            <!--
            <el-submenu index="4">
              <template slot="title"><i class="el-icon-location"></i>辅助线</template>

              <div v-for="(item,i) in chartsComponents" :key="i">
                <el-submenu :index="item.chartType" v-if="item.child">
                  <template slot="title"><i :class="item.icon"></i>{{item.layerName}}</template>
                  <el-menu-item :index="val.chartType" v-for="val in item.child" :key="val.chartType" @click="addComponent(val)">
                    <i class="icon iconfont"></i>
                    <span>{{val.layerName}}</span>
                  </el-menu-item>
                </el-submenu>
                <el-menu-item :index="item.customId" @click="addComponent(item)" v-else > 
                  <i :class="item.icon"></i>
                  <span slot="title">{{item.layerName}}</span>
                </el-menu-item>
              </div>
              
            </el-submenu>
            -->

           <!--  <el-submenu index="5">
              <template slot="title"><i class="el-icon-data-analysis"></i>指标</template>

              <div v-for="(item,i) in indicatorComponents" :key="i">
                <el-submenu :index="item.chartType" v-if="item.child">
                  <template slot="title"><i :class="item.icon"></i>{{item.layerName}}</template>
                  <el-menu-item :index="val.chartType" v-for="val in item.child" :key="val.chartType" @click="addComponent(val)">
                    <i :class="val.icon"></i>
                    <span>{{val.layerName}}</span>
                  </el-menu-item>
                </el-submenu>
                <el-menu-item :index="item.customId" @click="addComponent(item)" v-else > 
                  <i :class="item.icon"></i>
                  <span slot="title">{{item.layerName}}</span>
                </el-menu-item>
              </div>
              
            </el-submenu> -->

            <el-submenu index="6">
              <template slot="title"><i class="el-icon-s-grid"></i>表格</template>

              <div v-for="(item,i) in tableComponents" :key="i">
                <el-submenu :index="item.chartType" v-if="item.child">
                  <template slot="title"><i :class="item.icon"></i>{{item.layerName}}</template>
                  <el-menu-item :index="val.chartType" v-for="val in item.child" :key="val.chartType" @click="addComponent(val)">
                    <i class="val.icon"></i>
                    <span>{{val.layerName}}</span>
                  </el-menu-item>
                </el-submenu>
                <el-menu-item :index="item.customId" @click="addComponent(item)" v-else > 
                  <i :class="item.icon"></i>
                  <span slot="title">{{item.layerName}}</span>
                </el-menu-item>
              </div>
              
            </el-submenu>

            <el-submenu index="7">
              <template slot="title"><i class="el-icon-news"></i>条件</template>

              <div v-for="(item,i) in factorComponents" :key="i">
                <el-submenu :index="item.chartType" v-if="item.child">
                  <template slot="title"><i :class="item.icon"></i>{{item.layerName}}</template>
                  <el-menu-item :index="val.chartType" v-for="val in item.child" :key="val.chartType" @click="addComponent(val)">
                    <i :class="val.icon"></i>
                    <span>{{val.layerName}}</span>
                  </el-menu-item>
                </el-submenu>
                <el-menu-item :index="item.customId" @click="addComponent(item)" v-else > 
                  <i :class="item.icon"></i>
                  <span slot="title">{{item.layerName}}</span>
                </el-menu-item>
              </div>
              
            </el-submenu>
            
          </el-menu>
        </div>
        <div style="width: 50%; float: left;">
          <el-button icon="el-icon-folder-opened" type="text" @click="openCollectionChart"  style="margin-left:2px">
            收藏夹
          </el-button>
          <el-button icon="el-icon-arrow-left" type="text"  @click="undo" :disabled="undoStyle" style="margin-left:2px">
            撤销
          </el-button>
          <el-button icon="el-icon-arrow-right" type="text" @click="redo" :disabled="redoStyle" style="margin-left:2px">
            还原
          </el-button>
          <el-button icon="el-icon-view" type="text" @click="view" style="margin-left:2px">
            预览
          </el-button>

          <el-dropdown trigger="click" @command="handleCommand" style=" padding: 0px 2px;">
            <el-button icon="el-icon-edit-outline" type="text">
              导出
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="image">导出图片</el-dropdown-item>
              <el-dropdown-item command="word">导出word</el-dropdown-item>
              <el-dropdown-item command="ppt">导出ppt</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-button
            class="copy-btn-main"
            icon="el-icon-brush"
            type="text"
            @click="canvasClick"
            style="margin-left:2px"
          >
            主题
          </el-button>
          <el-button
            class="delete-btn"
            icon="el-icon-delete"
            type="text"
            @click="clear"
            style="margin-left:2px"
          >
            清空
          </el-button>

          <el-button
            class="copy-btn-main"
            icon="el-icon-document"
            type="text"
            @click="saveScreen"
            style="margin-left:2px"
          >
            保存
          </el-button>

          <el-button
            class="copy-btn-main"
            icon="el-icon-back"
            type="text"
            @click="returnBack"
            style="margin-left:2px"
          >
            返回列表
          </el-button>
        </div>

        
      </div>
        <el-row class="center-board-row">
          <!-- <el-form>
            <vue-drag-items :drawing-list="drawingList" @changelist="changelist"></vue-drag-items>
          </el-form> -->
          <div class="wrapper" id="wrapper">
            <SketchRule
              :lang="lang"
              :thick="thick"
              :scale="scale"
              :width="width"
              :height="height"
              :startX="startX"
              :startY="startY"
              :shadow="shadow"
              :horLineArr="lines.h"
              :verLineArr="lines.v"
              :cornerActive="true"
              @handleLine="handleLine"
              @onCornerClick="handleCornerClick"
            >
            </SketchRule>
            <div
              ref="screensRef"
              id="screens"
              @wheel="handleWheel"
              @scroll="handleScroll"
            >
              <div ref="containerRef" class="screen-container">
                <div id="canvas" :style="canvasStyle" ref="canvas">
                  <vue-drag-items :drawing-list="drawingList" :scale="scale" :activeId="activeId" @changelist="changelist"></vue-drag-items>
                </div>
              </div>
            </div>
          </div>
        </el-row>
    </div>

    <right-panel :activeData="activeData" :drawing-list="drawingList" @activeChange="activeChange"/>

    <!-- 数据大屏保存参数配置对话框 -->
    <el-dialog title="保存" :visible.sync="open" width="600px"  append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-loading="saveLoading" >
        <el-row>
          <el-col :span="12">
            <el-form-item label="大屏名称" prop="screenName" required>
              <el-input v-model="form.screenName" placeholder="请输入大屏名称" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="大屏密码" prop="password">
              <el-input v-model="form.password" placeholder="请输入大屏密码" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="是否公开" required>
              <el-radio-group v-model="form.isPublic">
                <el-radio label="0">否</el-radio>
                <el-radio label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否模板" required>
              <el-radio-group v-model="form.isTemplate">
                <el-radio label="0">否</el-radio>
                <el-radio label="1">是</el-radio>
                <el-radio label="2" v-if="adminRole">广场</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="分类" prop="deptId">
              <treeselect v-model="form.belongto" :options="classifyOptions" placeholder="请选择归属分类" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :disabled="saveLoading">确 定</el-button>
        <el-button @click="cancel" :disabled="saveLoading">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 上传组件至收藏夹对话框 -->
    <el-dialog title="收藏组件" :visible.sync="openCollection" width="500px" append-to-body>
      <el-form ref="collectionForm" :model="collectionForm" :rules="collectionRules" label-width="80px" v-loading="collectLoading" >
        <el-form-item label="图表名称" prop="name">
          <el-input v-model="collectionForm.name" placeholder="请输入图表名称" />
        </el-form-item>
        
        <el-form-item label="所属图表">
          <el-select v-model="collectionForm.graph" placeholder="请选择所属图表">
            <el-option
              v-for="dict in graphOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属组件">
          <el-select v-model="collectionForm.component" placeholder="请选择所属组件">
            <el-option
              v-for="dict in componentOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图表描述" prop="describe">
          <el-input v-model="collectionForm.describe" placeholder="请输入图表描述" />
        </el-form-item>
        
        <el-form-item label="是否公开">
          <el-radio-group v-model="collectionForm.isOpen">
            <el-radio
              v-for="dict in isOpenOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
            >{{dict.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCollectionForm" :disabled="collectLoading">确 定</el-button>
        <el-button @click="collectionCancel" :disabled="collectLoading">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 收藏组件库对话框 -->
    <el-dialog title="收藏组件库" :visible.sync="openCollectionStorage" width="1000px" hight="600px" append-to-body>
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" >
        <el-form-item label="图表名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入图表名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      
      <el-form-item label="所属图表" prop="graph">
        <el-select v-model="queryParams.graph" placeholder="请选择所属图表" clearable size="small">
          <el-option
            v-for="dict in graphOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属组件" prop="component">
        <el-select v-model="queryParams.component" placeholder="请选择所属组件" clearable size="small">
          <el-option
            v-for="dict in componentOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="描述" prop="describe">
        <el-input
          v-model="queryParams.describe"
          placeholder="请输入描述"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否公开" prop="pen">
        <el-select v-model="queryParams.isOpen" placeholder="请选择是否公开" clearable size="small">
          <el-option
            v-for="dict in isOpenOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
        
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>

      </el-form>

      <div style="overflow:auto; height:500px;">
        <ul
            class="background-images-ul"
            v-infinite-scroll="load"
            infinite-scroll-disabled="disabled">
            <li v-for="item in collectChartList" @click="selectImg(item.chartOption)" :key="item.id">
              <span title="删除" class="drawing-item-delete" @click.stop="deleteCollectChart(item.id)"><i class="el-icon-delete"></i></span>
              <img :src="basePath + item.thumbnail" class="border_img">
              <label  :title="item.name">{{ item.name }}</label>
            </li>
        </ul>
        <p v-if="loading" style="text-align: center; margin-top: 100px;">加载中...</p>
        <p v-if="noMore" style="text-align: center; margin-top: 100px;">没有更多了</p>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelCollectionStorage">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import '../../../assets/styles/icon.css'
import RightPanel from "@/views/tool/datav/RightPanel";
import VueDragItems from "@/views/tool/datav/VueDragItems";
import LayerItems from "@/views/tool/datav/LayerItems";
import SketchRule from "vue-sketch-ruler";

// 引入html2canvas
import html2canvas from 'html2canvas';

import { treeselect } from "@/api/tool/datav/classification";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

import {chartsComponents, textComponents,mediaComponents,indicatorComponents,tableComponents,
  factorComponents,defaultComponent, defaultThemeForm,getNewDefaultForm} from './ComponentsConfig'

import VueEvent from '@/views/tool/datav/VueEvent'

import { getScreen, addScreen, updateScreen } from "@/api/tool/datav/screenApi";

import { getOption, deleteOption, emptyOption } from './codegen/codegen'
import { listChartCollection, getChartCollection,addChartCollection,delCollectchart } from "@/api/tool/datav/chartCollection";
import pptxgen from 'pptxgenjs'

//let rectWidth = 1920;
//let rectHeight = 1080;

let defaultForm = getNewDefaultForm();

export default {
  components: {
    RightPanel,
    VueDragItems,
    LayerItems,
    SketchRule,
    Treeselect,
    html2canvas
  },
  data() {
    return {
      chartsComponents,
      textComponents,
      mediaComponents,
      indicatorComponents,
      tableComponents,
      factorComponents,
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        isPublic:"0",//非公开
        isTemplate:"0"//非模板
      },
      //归属分类
      classifyOptions: [],
      //主题设置
      themeForm: defaultForm,
      rectWidth: defaultForm.panelWidth,
      rectHeight: defaultForm.panelHeight,
      isSelfAdaption: defaultForm.isSelfAdaption,
      //全局id
      idGlobal: 0,
      //全局z-index
      zindex: 0,
      //绘画列表
      //drawingList: chartsComponents,
      drawingList: [],
      //活跃组件id
      activeId: defaultForm.customId,
      //活跃组件数据
      activeData: defaultForm,
      scale: 0.6, //初始化标尺的缩放
      startX: 0,
      startY: 0,
      lines: {
        //h: [100, 200],
        //v: [100, 200],
        h: [],
        v: [],
      },
      thick: 20, //标尺厚度
      width: 500,
      height: 400,
      lang: "zh-CN", // 中英文
      isShowRuler: true, // 显示标尺
      isShowReferLine: true, // 显示参考线
      // 表单校验
      rules: {
        
      },
      basePath: process.env.VUE_APP_BASE_API,
      openCollection : false,
      collectionOption:'',
      collectionForm:{
        isOpen: "N",//非公开
      },
      collectionRules: {
        name: [
          { required: true, message: "图表名称不能为空", trigger: "blur" }
        ],
        isOpen:[
           { required: true, message: "是否公开不能为空", trigger: "blur" }
        ]
      },
      // 所属图表字典
      graphOptions: [],
      // 所属组件字典
      componentOptions: [],
      // 是否公开字典
      isOpenOptions: [],
      openCollectionStorage: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        chartOption: undefined,
        graph: undefined,
        component: undefined,
        tag: undefined,
        isOpen: undefined,
        status: undefined,
      },
      // 总条数
      total: -1,
      // 自定义组件库表格数据
      collectChartList: [],
      loading: false,
      //保存大屏loading
      saveLoading :false,
      //收藏大屏loading
      collectLoading:false,
      //用户管理员权限
      adminRole:false,
    };
  },
  watch: {
    activeData: {
      deep: true,
      handler(newVal) {
        //console.log("5=>", newVal);
        this.activeData = newVal;
        this.activeId = newVal.customId;
        if(this.activeData.chartType == 'themeForm') {
          this.themeForm.isSelfAdaption = this.activeData.isSelfAdaption;
          this.themeForm.adaptionType = this.activeData.adaptionType;
          this.rectWidth = this.activeData.panelWidth;
          this.rectHeight = this.activeData.panelHeight;
          this.themeForm.panelWidth = this.activeData.panelWidth;
          this.themeForm.panelHeight = this.activeData.panelHeight;
          this.themeForm.bgColor = this.activeData.bgColor;
          this.themeForm.bgImage = this.activeData.bgImage;
          this.themeForm.themeColor = this.activeData.themeColor;
          //console.log(this.themeForm);
        }
      }
    },
    'themeForm.themeColor': {
      handler(val) {
        this.drawingList.map(item => { this.$set(item.chartOption, 'theme', val) });
      }
    },
    drawingList:{
      deep: true,
      handler(newVal){      
        this.$store.commit('recordSnapshot',this.drawingList);
      }
    }
  },
  computed: {
    shadow() {
      return {
        x: 0,
        y: 0,
        width: this.rectWidth,
        height: this.rectHeight,
      };
    },
    canvasStyle() {
      //let background = this.themeForm.bgImage != '' ? `url(${this.themeForm.bgImage}) no-repeat` : this.themeForm.bgColor
      let background = this.themeForm.bgImage != '' ? `url(${this.basePath + this.themeForm.bgImage}) no-repeat` : this.themeForm.bgColor
      return {
        width: this.rectWidth + "px",
        height: this.rectHeight + "px",
        transform: `scale(${this.scale})`,
        background: background,
      };
    },
    undoStyle(){
      return this.$store.state.snapshot.snapshotIndex <= 0
    },
    redoStyle(){
      return this.$store.state.snapshot.snapshotData.length == this.$store.state.snapshot.snapshotIndex +1
    },
    noMore () {
      if(this.total != -1) {
        return this.total == this.collectChartList.length
      } else {
        return false;
      }
    },
    disabled () {
      return this.loading || this.noMore
    },
  },
  created(){

    
    // let chartsNames = "";
    // chartsComponents.forEach(element => {
    //   chartsNames += "'"+element.chartType+"'"+",";
    //   if(element.child != undefined){
    //     element.child.forEach(ele => {
    //       chartsNames += "'"+ele.chartType+"'"+",";
    //     });
    //   }
      
    // });
    // console.log(chartsNames)
    
    let roles = this.$store.getters.roles;
    let result = roles.find(ele => ele === 'admin')//判断是否包含admin权限
    if (result) {
      this.adminRole = true;
    };

    defaultForm = getNewDefaultForm();
    //设置快照组件数据为空
    this.$store.commit('getComponentData',[]);
    this.$store.commit('resetSnapshotIndex',[]);
    //设置下载图表集合为空
    emptyOption();
    this.initDataDraw();

    VueEvent.$on('tabchange',function(chartList){
      if(chartList != null){
          //根据tab标签绑定组件设置组件的显示情况
          for(const obj of this.drawingList){
            const chart =  chartList.filter(function (item) {
              return item.customId == obj.customId;
            })[0]

            if(chart != null){
              obj.isShow = chart.isShow;
              //obj.chartOption.animate = chart.animate;
            }
        }
      }          
    }.bind(this)),
    VueEvent.$on('removetab',function(customId){
      //删除tab标签行，恢复绑定组件显示情况       
      const chart =  this.drawingList.filter(function (item) {
        return item.customId == customId;
      })[0]

      if(chart != null){
        chart.isShow = true;
      }
                        
    }.bind(this))
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    changelist() {
      console.log(this.chartlist);
    },
    handleLine(lines) {
      this.lines = lines;
    },
    handleCornerClick() {
      return;
    },
    handleScroll() {
      const screensRect = document
        .querySelector("#screens")
        .getBoundingClientRect();
      const canvasRect = document
        .querySelector("#canvas")
        .getBoundingClientRect();
      // 标尺开始的刻度
      const startX =
        (screensRect.left + this.thick - canvasRect.left) / this.scale;
      const startY =
        (screensRect.top + this.thick - canvasRect.top) / this.scale;
      this.startX = startX >> 0;
      this.startY = startY >> 0;

      //console.log(this.startX);
      //console.log(this.startX);
    },
    // 控制缩放值
    handleWheel(e) {
      if (e.ctrlKey || e.metaKey) {
        e.preventDefault();
        const nextScale = parseFloat(
          Math.max(0.2, this.scale - e.deltaY / 500).toFixed(2)
        );
        this.scale = nextScale;
      }
      this.$nextTick(() => {
        this.handleScroll();
      });
    },
    initSize() {
      const wrapperRect = document
        .querySelector("#wrapper")
        .getBoundingClientRect();
      const borderWidth = 1;
      this.width = wrapperRect.width - this.thick - borderWidth;
      this.height = wrapperRect.height - this.thick - borderWidth;
    },
    //添加控件
    addComponent(item) {
      //item = defaultComponent
      // let groupOption = [];
      // if(item.chartType == 'group'){     
      //   item.chartOption.forEach(element => {
      //     const clone = this.cloneComponent(element);
      //     this.drawingList.push(clone);
      //     groupOption.push(clone);
      //   });
      //   item.chartOption = groupOption;
      // }
      
      let clone = this.cloneComponent(item);
      if(clone.chartType == 'group'){
        clone.bindingDiv = clone.customId;
        clone.zindex = 0;
        clone.chartOption.forEach(element => {
            element.customId = ++this.idGlobal;
            element.zindex = ++this.zindex;
            element.chartOption.bindingDiv = element.customId;
            element.chartOption.theme = this.themeForm.themeColor;
            this.drawingList.push(element);
        });
      }
      this.drawingList.push(clone);
      this.activeId = clone.customId;
      this.activeData = clone;
      
    },
    cloneComponent(origin) {
      const clone = JSON.parse(JSON.stringify(origin));
      clone.customId = ++this.idGlobal;
      clone.zindex = ++this.zindex;
      if(origin.chartType != 'group'){
        clone.chartOption.bindingDiv = clone.customId;
        clone.chartOption.theme = this.themeForm.themeColor;
      }
      return clone;
    },
    activeChange(value) {
      this.activeData = value;
      this.activeId = value.customId;
    },
    activeIndexChange(newVal) {
      //console.log("点击左侧改变了活跃组件id");
      this.activeId = newVal;
      this.activeData = this.drawingList.filter(function (item) {
        return item.customId == newVal;
      })[0];
    },
    canvasClick() {
      let themeConfig = JSON.parse(JSON.stringify(this.themeForm));
      this.activeId = themeConfig.customId;
      this.activeData = themeConfig;
      
    },
    view() {

      let viewData = { themeForm: this.themeForm, drawingList: this.drawingList };
      localStorage.setItem("viewdata", JSON.stringify(viewData));
      window.open('/tool/datav/datavView', '_blank');
      
    },
    //复制
    copyComponent(comId) {
      let copyTag = this.drawingList.filter(function (item) {
                      return item.customId == comId;
                    })[0];
      let clone = this.cloneComponent(copyTag);
      if(clone.chartType == 'group'){
        clone.bindingDiv = clone.customId;
        clone.zindex = 0;
        clone.chartOption.forEach(element => {
            element.customId = ++this.idGlobal;
            element.zindex = ++this.zindex;
            element.chartOption.bindingDiv = element.customId;
            element.chartOption.theme = this.themeForm.themeColor;
            this.drawingList.push(element);
        });
      }else{

        clone.chartOption.isGroup = false;
        
      }
      this.drawingList.push(clone);
      this.activeId = clone.customId;
      this.activeData = clone;
    },
    //删除
    deleteComponent(comId) {
      //console.log(comId);
      // this.activeId = this.themeForm.customId;
      // this.activeData = this.themeForm;

      //判断如果是组合，先将组合里的组件存放，再删除组合之后删除组件
      const deleteChart =  this.drawingList.filter(function (item) {
                          return item.customId == comId;
                        })[0]
      if(deleteChart != null){
        this.drawingList.some((item, i) => {
          if (item.customId == comId ){
            if(item.chartType == 'tab'){
              let bindingObjs = item.chartOption.bindingObjs;
              if(bindingObjs != null && bindingObjs.length > 0){

                  //如果是新版选项卡绑定多组件，则循环解绑，全部显示
                  for(const obj of bindingObjs){
                    if(typeof obj.chartids != "undefined" && obj.chartids != '' ){
                      obj.chartids.forEach(element => {
                          const chart =  this.drawingList.filter(function (item) {
                            return item.customId == element;
                          })[0]
                          if(chart != null){
                              chart.isShow = true;
                          }        
                        });
                    }else{
                        //如果是旧版选项卡绑定单组件，则单个组件解绑显示
                        const chart =  this.drawingList.filter(function (item) {
                          return item.customId == obj.chartid;
                        })[0]

                        if(chart != null){
                          obj.isShow = true;
                        }
                    }
                  }

              }      
            }
            //如果是组合里的组件，则在组合中删除该组件
            else if(item.chartOption.isGroup == true){
              this.$message({
                message: '请先解散组件所在分组再删除！',
                type: 'warning'
              });
              return false;
            }
            // let drawingJson = JSON.parse(JSON.stringify(this.drawingList));
            // drawingJson.splice(i,1)

            // this.drawingList = drawingJson;

            this.drawingList.splice(i,1)
            // 在数组的some方法中，如果return true，就会立即终止这个数组的后续循环,所以相比较foreach，如果想要终止循环，那么建议使用some
            return true;  
          }
        })

        //判断如果是组合，并且删除组合里的组件
        if(deleteChart.chartType == 'group'){
          deleteChart.chartOption.forEach(element => {
              this.drawingList.some((chart, j) => {
                if (chart.customId == element.customId ){
                  this.drawingList.splice(j,1)
                  deleteOption(chart.customId);
                }
            })
          });
            
        }
        
        this.$nextTick(() => {
          this.activeId = this.themeForm.customId;
          this.activeData = this.themeForm;
        })
        //删除optionMap对应图表
        deleteOption(comId);
      }
    },
    //置顶
    topLayer(comId) {
      //根据comId找到当前目标对象
      const tagNode = JSON.parse(JSON.stringify( this.drawingList.filter(function (item) {
                      return item.customId == comId;
                    })[0] ));
      if(tagNode.chartOption.isGroup){
        this.$message({
                message: '请先解散组件再移动图层！',
                type: 'warning'
              });
      }
      else if(tagNode.chartType != "group"){
        //找到drawingList集合中zindex的最大值
        const maxIndex = Math.max.apply(Math,this.drawingList.map(item => { return item.zindex }));
        //在drawingList中找到所有大于当前目标对象的数组集合进行置顶修改
        
        this.drawingList.forEach(item => {             
          const position = this.drawingList.indexOf(item)
          if (item.zindex == tagNode.zindex) {
            item.zindex = maxIndex;
          } else if (item.zindex > tagNode.zindex) {
            item.zindex = item.zindex - 1;
          }
          this.$set(this.drawingList, position, item)
        });
      }     
      
    },
    //置底
    bottomLayer(comId) {
      //根据comId找到当前目标对象
      const tagNode = JSON.parse(JSON.stringify( this.drawingList.filter(function (item) {
                      return item.customId == comId;
                    })[0] ));
      if(tagNode.chartOption.isGroup){
        this.$message({
                message: '请先解散组件再移动图层！',
                type: 'warning'
              });
      }
      else if(tagNode.chartType != "group"){
        //找到drawingList集合中zindex的最大值
        const minIndex = Math.min.apply(Math,this.drawingList.map(item => { return item.zindex }));
        //在drawingList中找到所有大于当前目标对象的数组集合进行置顶修改
        
        this.drawingList.forEach(item => {             
          const position = this.drawingList.indexOf(item)
          if (item.zindex == tagNode.zindex) {
            item.zindex = minIndex;
          } else if (item.zindex < tagNode.zindex) {
            item.zindex = item.zindex + 1;
          }
          this.$set(this.drawingList, position, item)
        });
      }
    },
    //上移一层
    upLayer(comId) {
      //根据comId找到当前目标对象
      const tagNode = JSON.parse(JSON.stringify( this.drawingList.filter(function (item) {
                      return item.customId == comId;
                    })[0] ));
      if(tagNode.chartOption.isGroup){
        this.$message({
                message: '请先解散组件再移动图层！',
                type: 'warning'
              });
      }
      else if(tagNode.chartType != "group"){
        const tagNodePosition = this.drawingList.indexOf(this.drawingList.filter(function (item) {
                        return item.customId == comId;
                      })[0]);

        //找出上一层节点和节点位置
        const nextNode = this.drawingList.filter(function (item) {
                            return item.zindex > tagNode.zindex;
                          }).sort((a, b) => {return a.zindex - b.zindex})[0];

        const nextNodePosition = this.drawingList.indexOf(nextNode);

        if (nextNode != null) {
          const tagZindex = tagNode.zindex;
          tagNode.zindex = nextNode.zindex;
          nextNode.zindex = tagZindex;
          this.$set(this.drawingList, tagNodePosition, tagNode);
          this.$set(this.drawingList, nextNodePosition, nextNode);
        }
      }
    },
    //下移一层
    downLayer(comId) {
      //根据comId找到当前目标对象
      const tagNode = JSON.parse(JSON.stringify( this.drawingList.filter(function (item) {
                      return item.customId == comId;
                    })[0] ));
      if(tagNode.chartOption.isGroup){
        this.$message({
                message: '请先解散组件再移动图层！',
                type: 'warning'
              });
      }
      else if(tagNode.chartType != "group"){
        const tagNodePosition = this.drawingList.indexOf(this.drawingList.filter(function (item) {
                        return item.customId == comId;
                      })[0]);

        //找出上一层节点和节点位置
        const preNode = this.drawingList.filter(function (item) {
                            return item.zindex < tagNode.zindex;
                          }).sort((a, b) => {return b.zindex - a.zindex})[0];

        const preNodePosition = this.drawingList.indexOf(preNode);

        if (preNode != null) {
          const tagZindex = tagNode.zindex;
          tagNode.zindex = preNode.zindex;
          preNode.zindex = tagZindex;
          this.$set(this.drawingList, tagNodePosition, tagNode);
          this.$set(this.drawingList, preNodePosition, preNode);
        }
      }
    },
    //右键锁定
    onLocked(comId) {

      //根据comId找到当前目标对象
      const tagNode =  this.drawingList.filter(function (item) {
                      return item.customId == comId;
                    })[0] ;
      //console.log("tagNode", tagNode);
      
      if(tagNode.isUnlocked != false) { //没锁给锁上
        if(tagNode.chartOption.length > 1) {
          for(let i=0; i<tagNode.chartOption.length; i++) {
            this.$set(tagNode, "isUnlocked", false);
            this.$set(tagNode.chartOption[i], "isUnlocked", false);
            //console.log("00000", tagNode.chartOption[i].isUnlocked);
          }
        }
        this.$set(tagNode, "isUnlocked", false);

      }else { //锁上给打开
        //console.log("2", tagNode.isUnlocked);
        if(tagNode.chartOption.length > 1) {
          for(let i=0; i<tagNode.chartOption.length; i++) {
            this.$set(tagNode, "isUnlocked", true);
            this.$set(tagNode.chartOption[i], "isUnlocked", true);
            //console.log("00000", tagNode.chartOption[i].isUnlocked);
          }
        }
        this.$set(tagNode, "isUnlocked", true);

      }
        //console.log("3", tagNode.isUnlocked);
    },
    returnBack() {
      //this.$router.push('/tool/datav/');
      this.$router.push('/tool/datav/datavIndex');
    },
    saveScreen() {
      this.getTreeselect();
      this.open = true;
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {

          this.saveLoading = true;

          
          this.form.themeOption = JSON.stringify(this.themeForm);
          this.form.idGlobal = this.idGlobal;
          this.form.zindex = this.zindex;
          this.form.drawOption = JSON.stringify(this.drawingList);

          let optionObj= Object.create(null);
          for (let[k,v] of getOption()) {
            optionObj[k] = v;
          }
          let optionJson = JSON.stringify(optionObj);
          this.form.optionMap = optionJson;

          // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
          html2canvas(this.$refs.canvas, {
            backgroundColor: null,
    　　　　 useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
          }).then((canvas) => {
            let url = canvas.toDataURL('image/png')
            //console.log(url);
            this.form.capturePath = url;
            if (this.form.screenId != undefined) {
              updateScreen(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.saveLoading = false;
                  this.open = false;
                  this.returnBack();
                } else {
                  this.msgError(response.msg);
                }
              });
            } else {
              addScreen(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.saveLoading = false;
                  this.open = false;
                  this.returnBack();
                } else {
                  this.msgError(response.msg);
                }
              });
            }
          })
          
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    //清空
    clear(){
        this.$confirm('此操作将删除全部组件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          for(let item of this.drawingList){
            //删除optionMap对应图表
            deleteOption(item.customId);
          }
          this.drawingList = [];
          this.activeData = this.themeForm;
          this.$message({
            type: 'success',
            message: '清空成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消清空操作'
          });          
        });
    },
    initDataDraw() {
      //获取路由传来的参数
      let sId = this.$route.query.screenId;
      let temlateId = this.$route.query.temlateId;
      if (sId != '') {
        getScreen(sId).then(response => {
          this.form = response.data;
          this.drawingList = JSON.parse(this.form.drawOption);
          this.themeForm = JSON.parse(this.form.themeOption);
          this.idGlobal = this.form.idGlobal;
          this.zindex = this.form.zindex;
          this.rectWidth = this.themeForm.panelWidth;
          this.rectHeight = this.themeForm.panelHeight;
          this.activeId = this.themeForm.customId;
          this.activeData = this.themeForm;
        });
      } else {
        if (temlateId != '' && temlateId != undefined) {
          getScreen(temlateId).then(response => {
            //console.log(this.themeForm);
            this.form = response.data;
            this.drawingList = JSON.parse(this.form.drawOption);
            this.themeForm = JSON.parse(this.form.themeOption);
            this.idGlobal = this.form.idGlobal;
            this.zindex = this.form.zindex;
            this.rectWidth = this.themeForm.panelWidth;
            this.rectHeight = this.themeForm.panelHeight;
            this.activeId = this.themeForm.customId;
            this.activeData = this.themeForm;
            this.form.screenId = undefined;
          });
        } else {
          this.themeForm = defaultForm;
          this.rectWidth = defaultForm.panelWidth;
          this.rectHeight = defaultForm.panelHeight;
          this.activeId = defaultForm.customId;
          this.activeData = defaultForm;
          //console.log(this.themeForm);
        }
      }
    },
    /** 查询分类下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.classifyOptions = response.data;
      });
    },
    // 导出
    //图片格式转换方法
    dataURLToBlob(dataurl) {
        let arr = dataurl.split(',');
        let mime = arr[0].match(/:(.*?);/)[1];
        let bstr = atob(arr[1]);
        let n = bstr.length;
        let u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    },
    handleCommand(command) {
      //this.$message('click on item ' + command);
      //console.log("command:", command);
      if(command === "image") { //导出图片
      
        let that = this;
        let a = document.createElement('a');
        html2canvas(this.$refs.canvas, {
          backgroundColor: null,
　　　　   useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
        }).then((canvas) => {
          let dom = document.body.appendChild(canvas);
          a.style.display = 'none';
          document.body.removeChild(dom);
          let blob = that.dataURLToBlob(dom.toDataURL('image/png'));
          a.setAttribute('href', URL.createObjectURL(blob));
          //这块是保存图片操作  可以设置保存的图片的信息
          let pname = String(Math.random()).replace(".", "");
          a.setAttribute('download', pname + '.png');
          document.body.appendChild(a);
          a.click();
          URL.revokeObjectURL(blob);
          document.body.removeChild(a);
        })
      } else if(command === "ppt") {
        let that = this;
        // // 1. 创建新演示文稿
        // let pres = new pptxgen();
        // // 2. 添加幻灯片
        // let slide = pres.addSlide();
        // // 3. 向幻灯片中添加一个或多个对象（表格、形状、图像、文本和媒体）
        let imgUrl = "";
        html2canvas(this.$refs.canvas, {
          backgroundColor: null,
　　　　   useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
        }).then((canvas) => {
          let dom = document.body.appendChild(canvas);
          let blob = that.dataURLToBlob(dom.toDataURL('image/png'));
          imgUrl = URL.createObjectURL(blob);
          //console.log("嘤嘤嘤", imgUrl);
          that.ppt(imgUrl);
        })
        //let textboxText = "Hello World from PptxGenJS!";
        //let textboxOpts = { x: 1, y: 1, color: '363636', fill: { color:'F1F1F1' }, align: "center" };
        //slide.addText(textboxText, textboxOpts);
        //console.log("imgUrl:", imgUrl);
        //slide.addImage({ path: imgUrl });
        // 4. 保存演示文稿
        //let pname = String(Math.random()).replace(".", "");
        //pres.writeFile(pname + ".pptx");
      }
    },
    ppt(imgUrl) {
      // 1. 创建新演示文稿
        let pres = new pptxgen();
        // 2. 添加幻灯片
        let slide = pres.addSlide();
        // 3. 向幻灯片中添加一个或多个对象（表格、形状、图像、文本和媒体）
        slide.addImage({ path: imgUrl, w:'100%', h:'100%'});
        // 4. 保存演示文稿
        let pname = String(Math.random()).replace(".", "");
        pres.writeFile(pname + ".pptx");
    },
    undo(){
      this.$store.commit('undo');
      this.drawingList = this.$store.state.snapshot.componentData;
    },
    redo(){
      this.$store.commit('redo');
      this.drawingList = this.$store.state.snapshot.componentData;
    },
    //右键点击收藏
    collect(comId){
        let chart = this.drawingList.filter(function (item) {
                      return item.customId == comId;
                    })[0];

        this.resetCollectionForm();
        this.collectionOption = chart;
        this.getDicts("datav_graph").then(response => {
          this.graphOptions = response.data;
        });
        this.getDicts("datav_component").then(response => {
          this.componentOptions = response.data;
        });
        this.getDicts("sys_yes_no").then(response => {
          this.isOpenOptions = response.data;
        });
        this.openCollection = true;
        
        
    },
    //新增收藏组件提交
    submitCollectionForm(){
      this.$refs["collectionForm"].validate(valid => {
        if (valid) {
          this.collectLoading = true;
          let canvasId = this.collectionOption.customId;
          if(this.collectionOption.chartType == "group"){
            canvasId = this.collectionOption.chartOption[0].customId;
          }
          //console.log(document.getElementById(this.collectionOption.customId))
          //console.log(this.collectionOption.bindingDiv);
          this.collectionForm.chartOption = JSON.stringify(this.collectionOption);
          // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
          html2canvas(document.getElementById(canvasId), {
            backgroundColor: null,
    　　　　 useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
          }).then((canvas) => {
            let url = canvas.toDataURL('image/png')
            //console.log(url);
            this.collectionForm.thumbnail = url;
              addChartCollection(this.collectionForm).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("添加成功");
                  this.collectLoading = false;
                  this.openCollection = false;
                } else {
                  this.msgError(response.msg);
                  this.collectLoading = false;
                }
              });
          })
          
        }
      });
    },
    // 收藏表单重置
    resetCollectionForm() {
      this.collectionForm = {
        id: undefined,
        name: undefined,
        chartOption: undefined,
        graph: undefined,
        component: undefined,
        describe: undefined,
        thumbnail: undefined,
        isOpen: "N",
        status: "0",
        delFlag: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        remark: undefined
      };
      this.resetForm("collectionForm");
    },
    //取消新增收藏组件
    collectionCancel(){
      this.openCollection = false;
      this.resetCollectionForm();
    },
    //打开收藏夹
    openCollectionChart() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        chartOption: undefined,
        graph: undefined,
        component: undefined,
        tag: undefined,
        isOpen: undefined,
        status: undefined,
      },
     
      this.getDicts("datav_graph").then(response => {
        this.graphOptions = response.data;
      });
      this.getDicts("datav_component").then(response => {
        this.componentOptions = response.data;
      });
      this.getDicts("sys_yes_no").then(response => {
        this.isOpenOptions = response.data;
      });

      this.total = -1;
      this.collectChartList = [];
      this.queryParams.pageNum = 1;
      this.openCollectionStorage = true;
      this.load();
    },
    //收藏组件库加载更多
    load () {
      this.loading = true;
      listChartCollection(this.queryParams).then(response => {
        this.collectChartList = this.collectChartList.concat(response.rows);
        this.total = response.total;
        this.queryParams.pageNum++;
        this.loading = false;
      });
    },
    /** 收藏组件搜索按钮操作 */
    handleQuery() {
      this.total = -1;
      this.collectChartList = [];
      this.queryParams.pageNum = 1;
      this.openCollectionStorage = true;
      this.load();
    },
    //取消收藏组件库
    cancelCollectionStorage(){
      this.openCollectionStorage = false;
    },
    //选中收藏组件
    selectImg(item) {
      this.addComponent(JSON.parse(item));
      this.openCollectionStorage = false;
    },
    deleteCollectChart(id){
      this.$confirm('是否确认删除该收藏组件?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delCollectchart(id).then(response => {
        if (response.code === 200) {

          this.msgSuccess("删除成功");
            //重新加载上传数据
            this.total = -1;
            this.collectChartList = [];
            this.queryParams.pageNum = 1;
            this.load();
        } else {
          this.msgError(response.msg);
        }
      });
        }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除操作'
        });          
      });
    }
  },
  mounted() {
    // 滚动居中
    this.$refs.screensRef.scrollLeft =
      this.$refs.containerRef.getBoundingClientRect().width / 2 - 300; // 300 = #screens.width / 2
    this.$nextTick(() => {
      this.initSize();
    });

    //右键复制监听
    VueEvent.$on("copy_component", data=>{
      this.copyComponent(data)
    });

    //右键删除监听
    VueEvent.$on("delete_component", data=>{
      this.deleteComponent(data)
    });

    //右键置顶监听
    VueEvent.$on("top_layer", data=>{
      this.topLayer(data)
    });

    //右键置底监听
    VueEvent.$on("bottom_layer", data=>{
      this.bottomLayer(data);
    });

    //右键上移一层
    VueEvent.$on("up_layer", data=>{
      this.upLayer(data);
    });

    //右键下移一层
    VueEvent.$on("down_layer", data=>{
      this.downLayer(data);
    });

    //右键锁定
    VueEvent.$on("on_locked", data=>{
      this.onLocked(data);
    });

    //右键收藏
    VueEvent.$on("collect", data=>{
      this.collect(data);
    });

     //右键组合分组监听
    VueEvent.$on("combine_component", ctrlSelectArr=>{

      if(ctrlSelectArr.length > 1){

        let groupArr = [];
        
        for(let i =0;i<ctrlSelectArr.length;i++){
          const chart =  this.drawingList.filter(function (item) {
                return item.customId == ctrlSelectArr[i];
              })[0]
          if(chart != null && chart.chartOption.isGroup == true){
            
             this.$message({
              message: '所选组件已有分组！',
              type: 'warning'
            });
            return false;
                        
          }else{
            chart.chartOption.isGroup = true
            groupArr.push(chart);
          }
        }

        const groupChart = {};
        groupChart.chartType = 'group';
        groupChart.layerName =  '组合';
        groupChart.icon =  "el-icon-datav-folder";
        groupChart.customId =  ++this.idGlobal;
        groupChart.bindingDiv =  groupChart.customId;
        groupChart.zindex =  0;
        groupChart.isShow =  true;
        groupChart.chartOption = groupArr;
        
        this.drawingList.push(groupChart);
        //清空框选，设置当前选中数据
        VueEvent.$emit("clear_ctrl");
        this.activeId = groupChart.customId;
        this.activeData = groupChart;
      }
      
    });

    //右键解散分组监听
    VueEvent.$on("dismiss_component", data=>{

      for(let i =0;i<this.drawingList.length;i++){
        if(this.drawingList[i].customId == data){
          //将组合里的组件分组状态设置为false
          const groupOption = this.drawingList[i].chartOption;
          groupOption.forEach(element => {
            element.chartOption.isGroup = false;
          });
          this.drawingList.splice(i,1);
          break;
        }
      }

    });

    VueEvent.$on("active-change", data=>{
      this.activeData = data;
    });
  },
};
</script>

<style lang='scss' >

body,
html {
  margin: 0;
  padding: 0;
  background: #fff;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji;
}

input,
textarea {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji;
}

.editor-tabs {
  background: #121315;
  .el-tabs__header {
    margin: 0;
    border-bottom-color: #121315;
    .el-tabs__nav {
      border-color: #121315;
    }
  }
  .el-tabs__item {
    height: 32px;
    line-height: 32px;
    color: #888a8e;
    border-left: 1px solid #121315 !important;
    background: #363636;
    margin-right: 5px;
    user-select: none;
  }
  .el-tabs__item.is-active {
    background: #1e1e1e;
    border-bottom-color: #1e1e1e !important;
    color: #fff;
  }
  .el-icon-edit {
    color: #f1fa8c;
  }
  .el-icon-document {
    color: #a95812;
  }
}

// home
.right-scrollbar {
  .el-scrollbar__view {
    padding: 12px 18px 15px 15px;
  }
}
.left-scrollbar .el-scrollbar__wrap {
  box-sizing: border-box;
  overflow-x: hidden !important;
  margin-bottom: 0 !important;
}
.center-tabs {
  .el-tabs__header {
    margin-bottom: 0 !important;
  }
  .el-tabs__item {
    width: 50%;
    text-align: center;
  }
  .el-tabs__nav {
    width: 100%;
  }
}
.reg-item {
  padding: 12px 6px;
  background: #f8f8f8;
  position: relative;
  border-radius: 4px;
  .close-btn {
    position: absolute;
    right: -6px;
    top: -6px;
    display: block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    color: #fff;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    font-size: 12px;
    &:hover {
      background: rgba(210, 23, 23, 0.5);
    }
  }
  & + .reg-item {
    margin-top: 18px;
  }
}
.action-bar {
  & .el-button + .el-button {
    margin-left: 15px;
  }
  & i {
    font-size: 20px;
    vertical-align: middle;
    position: relative;
    top: -1px;
  }
}

.custom-tree-node {
  width: 100%;
  font-size: 14px;
  .node-operation {
    float: right;
  }
  i[class*="el-icon"] + i[class*="el-icon"] {
    margin-left: 6px;
  }
  .el-icon-plus {
    color: #409eff;
  }
  .el-icon-delete {
    color: #157a0c;
  }
}

.left-scrollbar .el-scrollbar__view {
  overflow-x: hidden;
}

.el-rate {
  display: inline-block;
  vertical-align: text-top;
}
.el-upload__tip {
  line-height: 1.2;
}

$selectedColor: #f6f7ff;
$lighterBlue: #409eff;

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.components-list {
  padding: 8px;
  box-sizing: border-box;
  height: 100%;
  .components-item {
    display: inline-block;
    width: 48%;
    margin: 1%;
    transition: transform 0ms !important;
  }
}
.components-draggable {
  padding-bottom: 20px;
}
.components-title {
  font-size: 14px;
  color: #222;
  margin: 6px 2px;
  .svg-icon {
    color: #666;
    font-size: 18px;
  }
}

.components-body {
  padding: 8px 10px;
  background: $selectedColor;
  font-size: 12px;
  cursor: move;
  border: 1px dashed $selectedColor;
  border-radius: 3px;
  .svg-icon {
    color: #777;
    font-size: 15px;
  }
  &:hover {
    border: 1px dashed #787be8;
    color: #787be8;
    .svg-icon {
      color: #787be8;
    }
  }
}

.left-board {
  width: 260px;
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
}
.left-scrollbar {
  height: calc(100vh - 42px);
  overflow: hidden;
}
.center-scrollbar {
  height: calc(100vh - 42px);
  overflow: hidden;
  border-left: 1px solid #f1e8e8;
  border-right: 1px solid #f1e8e8;
  box-sizing: border-box;
}
.center-board {
  height: 100vh;
  width: auto;
  margin: 0 350px 0 260px;
  box-sizing: border-box;
}
.empty-info {
  position: absolute;
  top: 46%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 18px;
  color: #ccb1ea;
  letter-spacing: 4px;
}
.action-bar {
  position: relative;
  height: 42px;
  text-align: right;
  padding: 0 15px;
  box-sizing: border-box;
  border: 1px solid #f1e8e8;
  border-top: none;
  border-left: none;
  .delete-btn {
    color: #f56c6c;
  }
}
.logo-wrapper {
  position: relative;
  height: 42px;
  background: #fff;
  border-bottom: 1px solid #f1e8e8;
  box-sizing: border-box;
}
.logo {
  position: absolute;
  left: 12px;
  top: 6px;
  line-height: 30px;
  color: #00afff;
  font-weight: 600;
  font-size: 17px;
  white-space: nowrap;
  > img {
    width: 30px;
    height: 30px;
    vertical-align: top;
  }
  .github {
    display: inline-block;
    vertical-align: sub;
    margin-left: 15px;
    > img {
      height: 22px;
    }
  }
}

.center-board-row {
  padding: 12px 12px 15px 12px;
  box-sizing: border-box;
  & > .el-form {
    // 69 = 12+15+42
    height: calc(100vh - 69px);
  }
}
.drawing-board {
  height: 100%;
  position: relative;
  .components-body {
    padding: 0;
    margin: 0;
    font-size: 0;
  }
  .sortable-ghost {
    position: relative;
    display: block;
    overflow: hidden;
    &::before {
      content: " ";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 3px;
      background: rgb(89, 89, 223);
      z-index: 2;
    }
  }
  .components-item.sortable-ghost {
    width: 100%;
    height: 60px;
    background-color: $selectedColor;
  }
  .active-from-item {
    & > .el-form-item {
      background: $selectedColor;
      border-radius: 6px;
    }
    & > .drawing-item-copy,
    & > .drawing-item-delete {
      display: initial;
    }
    & > .component-name {
      color: $lighterBlue;
    }
  }
  .el-form-item {
    margin-bottom: 15px;
  }
}
.drawing-item {
  position: relative;
  cursor: move;
  &.unfocus-bordered:not(.activeFromItem) > div:first-child {
    border: 1px dashed #ccc;
  }
  .el-form-item {
    padding: 12px 10px;
  }
}
.drawing-row-item {
  position: relative;
  cursor: move;
  box-sizing: border-box;
  border: 1px dashed #ccc;
  border-radius: 3px;
  padding: 0 2px;
  margin-bottom: 15px;
  .drawing-row-item {
    margin-bottom: 2px;
  }
  .el-col {
    margin-top: 22px;
  }
  .el-form-item {
    margin-bottom: 0;
  }
  .drag-wrapper {
    min-height: 80px;
  }
  &.active-from-item {
    border: 1px dashed $lighterBlue;
  }
  .component-name {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12px;
    color: #bbb;
    display: inline-block;
    padding: 0 6px;
  }
}
.drawing-item,
.drawing-row-item {
  &:hover {
    & > .el-form-item {
      background: $selectedColor;
      border-radius: 6px;
    }
    & > .drawing-item-copy,
    & > .drawing-item-delete {
      display: initial;
    }
  }
  & > .drawing-item-copy,
  & > .drawing-item-delete {
    display: none;
    position: absolute;
    top: -10px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    font-size: 12px;
    border: 1px solid;
    cursor: pointer;
    z-index: 1;
  }
  & > .drawing-item-copy {
    right: 56px;
    border-color: $lighterBlue;
    color: $lighterBlue;
    background: #fff;
    &:hover {
      background: $lighterBlue;
      color: #fff;
    }
  }
  & > .drawing-item-delete {
    right: 24px;
    border-color: #f56c6c;
    color: #f56c6c;
    background: #fff;
    &:hover {
      background: #f56c6c;
      color: #fff;
    }
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  overflow: hidden;
}
body * {
  box-sizing: border-box;
  user-select: none;
}
.wrapper {
  background-color: #f5f5f5;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 890px;
  border: 1px solid #dadadc;
}
#screens {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.screen-container {
  position: absolute;
  width: 5000px;
  height: 3000px;
}
.scale-value {
  position: absolute;
  left: 0;
  bottom: 100%;
}
.button {
  position: absolute;
  left: 100px;
  bottom: 100%;
}
.button-ch {
  position: absolute;
  left: 200px;
  bottom: 100%;
}
.button-en {
  position: absolute;
  left: 230px;
  bottom: 100%;
}
#canvas {
  position: absolute;
  top: 80px;
  left: 50%;
  margin-left: -600px;
  width: 160px;
  height: 200px;
  background: lightblue;
  transform-origin: 50% 0;
}
.el-submenu__title{
  padding: 0 10px;
}
.action-bar .el-button+.el-button {
    margin-left: 5px;
}
background-images-ul {
    margin-bottom: 20px;
}
.background-images-ul li {
    position: relative;
    margin: 2px;
    display: inline-block;
    width: 200px;
    line-height: 25px;
    padding: 20px;
    border: 1px solid #e2e2e2;
    font-size: 14px;
    text-align: center;
    color: #666;
    transition: all .3s;
    -webkit-transition: all .3s;
    cursor: pointer;
    &:hover {
      
      & > .drawing-item-delete{
        display: initial;
      }
    }
    & > .drawing-item-copy, & > .drawing-item-delete{
      display: none;
      position: absolute;
      top: 0px;
      left: 175px;
      width: 22px;
      height: 22px;
      line-height: 20px;
      text-align: center;
      border-radius: 50%;
      font-size: 12px;
      border: 1px solid;
      cursor: pointer;
      z-index: 1;
   }
    & > .drawing-item-delete{
      right: 24px;
      border-color: #F56C6C;
      color: #F56C6C;
      background: #fff;
      &:hover{
        background: #F56C6C;
        color: #fff;
      }
  }
}
.border_img {
    width: 160px;
    height: 90px;
}
.background-images-ul label {
    display: inline-block;
    width: 160px;
    color: #0088ff;
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
}
.row {
    margin-right: -15px;
    margin-left: -15px;
}
.col-xs-6 {
    width: 50%;
    float: left;
    cursor: pointer;
    padding: 10px;
    /**background-color: #b3d4ff;**/
}
.theme-plan-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: auto;
    height: 100px;
    overflow: hidden;
    border: 1px solid #eee;
    padding: 5px;
    border-radius: 4px;
    margin-bottom: 8px;
}
.theme-plan-color {
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    margin-left: 2px;
    margin-right: 2px;
    display: inline-block;
    border-radius: 3px;
}

.el-menu--horizontal>.el-submenu {
    float: left;
    width: 20%;
}
.action-bar ul{
  width: 80%;
}
</style>